<template>
  <div>
    <el-table :row-class-name="tableRowClassName" :data="tableDataList" style="width: 100%" border>
      <!-- 结构分类 -->
      <el-table-column align="center" prop="category" label="结构分类"></el-table-column>

      <!-- 销售金额 -->
      <el-table-column align="center" prop="salesAmount" label="销售金额(万)" :formatter="stateFormat"></el-table-column>

      <!-- 销售金额占比（占全品类） -->
      <el-table-column :formatter="PerseFormat" align="center" prop="salesAmountRatio"
        label="销售金额占比（占全品类）"></el-table-column>

      <!-- 老品销售额占比一级类目 -->
      <!-- <el-table-column
        :formatter="PerseFormat"
        align="center"
        prop="oldInFirstLevelAmountRatio"
        label="老品销售额占比一级类目"
      ></el-table-column> -->

      <!-- 销售件数 -->
      <el-table-column align="center" prop="salesNumber" label="销售件数" :formatter="numberFormat"></el-table-column>

      <!-- 销售件数占比 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="salesNumberRatio" label="销售件数占比"></el-table-column>
      <!-- 老品销售数量占比一级类目 -->
      <!-- <el-table-column
        align="center"
        prop="oldInFirstLevelNumberRatio"
        label="老品销售数量占比一级类目"
      ></el-table-column> -->

      <!-- 件均单价 -->
      <el-table-column align="center" prop="avgSalePrice" label="件均单价" :formatter="stateFormat"></el-table-column>

      <!-- 折扣率 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="discountRate" label="折扣率"></el-table-column>

      <!-- 退货率 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="returnRate" label="退货率"></el-table-column>

      <!-- 售罄率 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="sellOutRate" label="售罄率"></el-table-column>

      <!-- 商品访客数 -->
      <el-table-column align="center" prop="visitors" label="商品访客数" :formatter="numberFormat"></el-table-column>
      <!-- 访客数占总比 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="visitorsRatio" label="访客数占总比"></el-table-column>
      <!-- 支付转化率 -->
      <el-table-column :formatter="PerseFormat" align="center" prop="payConversionRate" label="支付转化率"></el-table-column>

      <!-- 库存数量 -->
      <el-table-column align="center" prop="inventoryQuantity" label="库存数量" :formatter="numberFormat"></el-table-column>

      <!-- 库存金额 -->
      <el-table-column :formatter="stateFormat" align="center" prop="inventoryAmount" label="库存金额"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableDataList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {

    tableRowClassName({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (row.category === "汇总") {
        return "highlight-row";
      } else {
        return "";
      }
    },
  }
};
</script>

<style lang="scss" >
/* 添加你想要的特定行的CSS样式 */
.highlight-row {
  position: sticky;
  bottom: 0;
  font-weight: bold;
}
</style>